<template>
  <div class="personal-info">
    <h2>个人信息</h2>
    <div class="avatar">
      <img :src="avatarUrl" alt="头像" />
      <el-upload
        class="avatar-upload"
        action=""
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        :on-success="handleAvatarUpload"
        :disabled="!isEditMode"
      >
        <el-button size="small" type="primary">上传头像</el-button>
      </el-upload>
    </div>
    <el-form :model="form" label-width="120px">
      <el-form-item label="所属航空公司">
        <el-select v-model="form.airline" placeholder="请选择" :disabled="!isEditMode">
          <el-option label="AAA航空公司" value="AAA航空公司"></el-option>
          <el-option label="BBB航空公司" value="BBB航空公司"></el-option>
          <el-option label="CCC航空公司" value="CCC航空公司"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="员工ID">
        <el-input v-model="form.employeeId" :disabled="!isEditMode"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="form.username" :disabled="!isEditMode"></el-input>
      </el-form-item>
      <el-button type="primary" @click="toggleEditMode">{{ isEditMode ? '保存修改' : '编辑个人信息' }}</el-button>
      <el-button type="text" @click="goBack">返回</el-button>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          airline: 'AAA航空公司',
          employeeId: '12301',
          username: '杜安慰'
        },
        avatarUrl: '', // 头像 URL
        isEditMode: false // 是否处于编辑模式
      };
    },
    methods: {
      beforeAvatarUpload(file) {
        // 实现头像上传逻辑
      },
      handleAvatarUpload(response) {
        // 处理头像上传成功后的响应
      },
      toggleEditMode() {
        this.isEditMode = !this.isEditMode; // 切换编辑模式
      },
      goBack() {
        this.$router.push('/index'); // 跳转到 Index 页面
      }
    }
  };
</script>

<style scoped>
  .personal-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 50px;
  }

  .avatar {
    margin-bottom: 20px;
  }

  .avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .avatar-upload {
    margin-top: 10px;
  }

  .el-form-item {
    margin-bottom: 20px;
  }

  .el-button {
    margin-right: 10px;
  }

  h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
</style>
